* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

//高度塌陷解决：伪元素
.clearfix::before, .clearfix::after {
  content: '';
  display: table;   //block/both
  clear: both;
}

input, button {
  outline: none;
}

html {
  font-size: 10px;
}

body {
  font-size: 1.6rem;
}

a {
  color: purple;
}

.box {
  width: 50rem;
  //height: 60rem;
  border: 0.1rem solid #e0e0e0;
  margin: 5rem auto;
  & .box-from, .box-footer {
    padding: 3rem;
  }
  & .box-from {
    //background-color: skyblue;
    & .s1 {
      margin-bottom: 2rem;
      & h4 {
        color: #666;
      }
      & input {
        width: 100%;
        height: 4rem;
        margin-top: 0.5rem;
        padding-left: 0.5rem;
        border-radius: 0.5rem;
        border: 0.1rem solid #cccccc;
      }
    }
    & .s2 {
      margin-bottom: 2rem;
    }
    & .btn-submit {
      width: 100%;
      height: 4rem;
      font-size: 2rem;
      border: none;
      color: #fff;
      background-color: purple;
      border-radius: 0.5rem;
    }
  }
  .box-footer {
    .login-another {
      color: #666666;
      margin-bottom: 2rem;
    }
    .login-three {
      color: #666666;
      text-align: center;
      & span {
        position: relative;
      }
      & span::before,span::after {    //伪元素
        content: '';
        display: inline-block;
        width: 10rem;
        height: 0.1rem;
        border-bottom: 0.1rem solid #e0e0e0;
        position: absolute;
        top: 50%;
      }
      & span::before {
        left: -65%;
      }
      & span::after {
        right: -65%;
      }
      & .login-three-icon {
        margin-top: 2rem;
        & img {
          width: 5rem;
        }
      }
    }
  }
}
